<template>
  <div class="list-container">
    <div class="header d-flex justify-space-between align-center pl-7 pr-3">
      <div class="title">
        <slot name="title"> {{ propTitle }} </slot>
      </div>
      <div class="header-append">
        <slot name="headerAppend">
          <v-icon class="icon pointer" @click="$emit('click')">mdi-plus</v-icon>
        </slot>
      </div>
    </div>
    <v-item-group v-model="selectedValue" class="list-content">
      <v-container class="px-2 py-1">
        <v-col
          v-for="item in propItems"
          :key="item.id"
          cols="12"
          class="py-1 px-0"
        >
          <v-item :value="item" v-slot="slotData">
            <v-card
              :value="item"
              class="d-flex align-center justify-space-between px-6 card"
              :class="[slotData.active ? 'active' : '']"
              flat
              dark
              height="48"
              width="100%"
              @click="slotData.toggle"
            >
              <slot name="label" :item="item" v-bind="slotData">
                123
                {{ item.content }}
              </slot>
              <div class="item-append">
                <slot name="itemAppend" :item="item"></slot>
              </div>
            </v-card>
          </v-item>
        </v-col>
      </v-container>
    </v-item-group>
  </div>
</template>

<script lang="ts">
import { Vue, Component, ModelSync } from "vue-property-decorator";
@Component({
  components: {},
  props: {
    items: Array,
    title: {
      type: String,
      default: "List Title",
    },
  },
})
export default class List extends Vue {
  @ModelSync("selected", "input", { type: Object }) selectedValue!: object;
  get propItems() {
    return this.$props.items;
  }

  get propTitle() {
    return this.$props.title;
  }
}
</script>

<style lang="scss" scoped>
@import "./List.scss";
</style>
